@charset "utf-8";

.menu{/*контейнер меню*/
background:#fff;/*цвет блока*/
float:top;/*примыкание сверху*/
height:4.6em;/*высота блока*/
margin:auto;/*внешние отступы авто*/  
position:relative;/*позиционирование варьируется*/ 
width:520px;/*ширина блока*/ 
border-radius:4px;/*радиус закругленных углов*/ 
-webkit-border-radius:4px;/*для хрома*/ 
-moz-border-radius:4px;/*для мозилы*/
 box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.1)inset;/*2 внутренние тени*/
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.1)inset;/*свойства теней для хрома*/
-moz-box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.1)inset;/*свойства теней для мозилы*/
}
.menu:before,
.menu:after{/*стили левой тени до блока и правой тени после блока */
bottom:15px;/*отступ тени снизу*/ 
content:"";/*добавляет контент тени*/
height:20%;/*высота тени от родителя*/
left:10px;/*отступ тени слева*/
max-width:240px;/*максимальная длина тени*/
position:absolute;/*позиция меняется в зависимости от родителя*/ 
box-shadow:0 15px 10px rgba(0,0,0,.7);/*тень бокса*/
-webkit-box-shadow:0 15px 10px rgba(0,0,0,.7);/*тень для хрома*/   
-moz-box-shadow:0 15px 10px rgba(0,0,0,.7);/*тень для мозилы*/
transform:rotate(-3deg);/*трансформация тени на -3 градуса*/
-webkit-transform:rotate(-3deg);/*трансформация тени для хрома*/    
-moz-transform:rotate(-3deg);/*трансформация тени для мозилы*/   
-o-transform:rotate(-3deg);/*трансформация тени для оперы*/
width:50%;/*длина тени от родителя*/
z-index:-2;/*нижний слой по отношению к родителю*/
}
.menu:after{/*стили правой тени после блока*/ 
left:auto;/*отступ тени слева авто*/               
right:10px;/*отступ тени справа*/ 
transform:rotate(3deg);/*трансформация тени на 3 градуса*/
-webkit-transform:rotate(3deg);/*трансформация тени для хрома*/    
-moz-transform:rotate(3deg);/*трансформация тени для мозилы*/  
-o-transform:rotate(3deg);/*трансформация тени для оперы*/
}
.menu ul li a{/*ссылка меню*/
color:#099;/*цвет букв*/
text-shadow:1px 1px 0.5px rgba(204,204,204,.9);/*тень текста*/
}
.menu li:hover a {/*ссылка меню при наведении*/
color:#f36;/*цвет букв*/
text-shadow:1px 1px 0.5px rgba(255,255,255,.8);/*тень текста*/
}
nav{/*блок навигации*/
border:0px solid #000;/*толщина рамки цвет*/
width:96%;/*ширина блока*/ 
position:absolute;/*позиция меняется в зависимости от родителя*/ 
top:20px;/*расположение от верха*/ 
left:10px;/*расположение слева*/ 
text-align:center;/*текст по центру*/ 
z-index:10;/*верхний слой*/ 
}
nav ul{/*у группы нет отступов*/
margin:0;/*внешние отступы*/
padding:0;/*внутренние отступы*/
}
nav li{/*у каждого пункта группы*/
display:inline-block;/*свойства блоков*/
margin:auto 10px;/* внешние отступы */
}
nav a{/*свойства ссылок*/
background-color:#f8f8f8;/*фон кнопок*/
background-image:-webkit-linear-gradient(top, #f8f8f8, #fff);
background-image:-moz-linear-gradient(top, #f8f8f8, #fff); 
background-image:-ms-linear-gradient(top, #f8f8f8, #fff); 
background-image:-o-linear-gradient(top, #f8f8f8, #fff);
background-image:linear-gradient(top, #f8f8f8, #fff);/*градиент*/
border:2px solid #fff;/*обрамление кнопок границами*/
display:inline-block;/*в строчку со свойствами блоков*/
position:relative;/*позиционирование варьируется*/
padding:5px 10px;/*внутренние отступы*/
text-decoration:none;/*подчёркивания нет*/
font:bold .8em 'Lucida sans', Arial, Helvetica;/*свойства шрифта*/
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;/*радиус закругления*/
-moz-box-shadow:0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.3), 0 10px 10px -5px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.3), 0 10px 10px -5px rgba(0,0,0,.2);
box-shadow:0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.3), 0 10px 10px -5px rgba(0,0,0,.2);/*тени кнопок*/
}
nav a:hover{/*свойства ссылок при наведении*/
background-color:#eee;/*фон кнопок*/
background-image:-webkit-linear-gradient(top, #eee, #fff);
background-image:-moz-linear-gradient(top, #eee, #fff); 
background-image:-ms-linear-gradient(top, #eee, #fff); 
background-image:-o-linear-gradient(top, #eee, #fff);
background-image:linear-gradient(top, #eee, #fff);/*градиент*/		
}	
nav a:active{/*свойства ссылок при нажатии*/
top:1px;/*эффект нажатия на кнопку*/
background:#f5f5f5;/*фон кнопок*/
-moz-box-shadow:0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
box-shadow: 0 1px 1px rgba(0,0,0,.05)inset, 0 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);/*тени кнопок*/
}
nav a::before{/*добавляются свойства*/
background-color:#e3e3e3;
background-image:-webkit-linear-gradient(top, #e3e3e3, #f7f7f7);
background-image:-moz-linear-gradient(top, #e3e3e3, #f7f7f7); 
background-image:-ms-linear-gradient(top, #e3e3e3, #f7f7f7); 
background-image:-o-linear-gradient(top, #e3e3e3, #f7f7f7);
background-image:linear-gradient(top, #e3e3e3, #f7f7f7);
bottom:-10px;
content:'';
left:-10px;
position:absolute;
right:-10px;
top:-10px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow:0 1px 1px rgba(0,0,0,.05)inset;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05)inset;
box-shadow:0 1px 1px rgba(0,0,0,.05)inset;
z-index:-1;		
}
nav a:active::before{/*после нажатия добавляются свойства*/
top:-11px;
}